<template>
    <div class="hydt-wrapper">
        <hg-tab @change="changeTab" :list="tabList"/>
        <el-table size="mini" :data="tableData" stripe style="width: 100%">
            <el-table-column align="left" label="来源" width="200">
                <template slot-scope="scope" style="padding-left:20px">
                    <a class="link-line" style="color:#2275c7" :href="scope.row.channelUrl" target="_blank"><i class="fa fa-chevron-right"></i> {{scope.row.acquisition}}</a>
                </template>
            </el-table-column>
            <el-table-column align="left" label="标题" width="500">
                <template slot-scope="scope">
                    <a class="link-line mark-visit text-elli" :href="scope.row.contentUrl" target="_blank">{{scope.row.title}}</a>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="datetime" label="日期" width="400"></el-table-column>
            <el-table-column align="center" label="分享" width="100">
                <template slot-scope="scope">
                    <el-button type='text' @click='shareUrl(scope.row.contentUrl)'>
                        <i class="fa fa-share"></i>
                    </el-button>
                </template>                
            </el-table-column>
        </el-table>
        <div class="tool-box">
            <el-pagination class="page" @size-change="changeSize" :page-size="10" :current-page="curPage" :page-sizes="[10, 20, 30, 40]" @current-change="changePage" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
        </div>
        
        <el-dialog title="手机扫一扫分享" width="300px" :visible.sync="dialogVisible">
            <canvas ref="canvas" class="canvas"></canvas>
            <br>
            <el-button id="clipBtn" :data-clipboard-text="activeUrl">复制链接</el-button>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import hgTab from '../common/hgTab.vue'
import _ from 'lodash'
import QRCode from 'qrcode'
import {dateFormat} from '../../scripts/until'
import {removeHtmlTag} from '../../scripts/until'
import Clipboard from 'clipboard'

export default {
    name: 'hydt',
    data: function() {	
        return {
            tableData: [],
            dialogVisible: false,
            total:10,
            activeTab: 'all',
            tabList: [
                {
                    label: '全部',
                    value: 'all'
                },{
                    label: '水利部',
                    value: '5'
                },{
                    label: '长江委',
                    value: '6'
                },{
                    label: '省水利厅',
                    value: '7'
                },{
                    label: '黄冈市',
                    value: '8'
                }
            ],
            curPage: 1,
            pageSize: 10,
            activeUrl: '',
            acquisition: {
                "5": "水利部",
                "6": "长江委",
                "7": "省水利厅",
                "15": "省水利厅",
                "16": "省水利厅",
                "8": "黄冈市"
            }
        }
    },
    components: {
        hgTab
    },
    methods: {
        changeTab(val) {
            this.curPage = 1
            this.activeTab = val;
            this.getList(this.pageSize, 1)
        },
        shareUrl(url) {
            this.dialogVisible = true;
            let that = this;
            this.activeUrl = url;
            var clipboard = new Clipboard('#clipBtn'); 
            clipboard.on('success', function(e) {
                that.$message.success('已复制到剪切板，按Ctrl+V可进行粘贴')
            });
            clipboard.on('error', function(e) {
                that.$message.error('复制失败！')
            });
            setTimeout(function() {
                var canvas = that.$refs.canvas;
                QRCode.toCanvas(canvas, url, function (error) {
                    if (error) console.error(error)
                })
            }, 100);
        },
        changePage(val) {
            this.getList(this.pageSize, val)
        },
        changeSize(val) {
            this.pageSize = val;
            this.getList(val, 1)
        },
        getList(size, num) {
            this.$$http('GET_NEWS_LIST', [this.activeTab, size, num]).then(data=>{
                this.tableData = data.rows;
                this.total = data.total;
                _.forEach(this.tableData,item=>{
                    item.title = removeHtmlTag(item.title)
                    item.datetime = dateFormat(item.jc_content_ext.releaseDate,'ymd');
                    item.acquisition = this.acquisition[item.acquisitionId]
                })
            })
        }
    },
    mounted() {
        this.getList(this.pageSize, 1)
    }
}
</script>

<style lang="scss">
.hydt-wrapper{
    text-align: center;
    position: relative;
    .el-table_1_column_1{
        padding-left: 10px!important;
    }
    .tool-box{
        text-align: right;
        .page{
            margin: 15px 0;
        }
    }
    .cell{
        font-size: 15px!important;
    }
    .el-table--mini td {
        padding: 3px 0;
    }
    .el-table--mini th {
        .cell{
            font-size: 16px!important;
        }
        padding: 8px 0;
    }
}
</style>